<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="/css/reset.css" type="text/css">
    <link rel="stylesheet" href="/css/fillmsg.css" type="text/css">
    <link rel="stylesheet" href="/css/mpicker.css" type="text/css">
    <title>身份信息填写</title>
</head>
<body>
<div id="app" v-cloak>
    <div class="banner-box">
        <img src="/img/banner.png" alt="banner">
    </div>
    <div class="tips">
				<span class="tips-mark">
					<img src="/img/star_big.png" alt="star"/>
				</span>
        <span class="tips-text">在对本院作出评价之前，我们需要您的一些身份信息，以便及时回访发，确认问题得到解决。</span>
    </div>
    <div class="patient-title  border-bottom">
				<span class="patient-mark">
					<img src="/img/jx.png" alt="jx"/>
				</span>
        <span class="patient-text">患者信息</span>
    </div>
    <ul class="patient-box">
        <li class="patient-content border-bottom">
					<span class="content-mark">
						<img  src="/img/star_small.png" alt="star"/>
					</span>
            <div class="content-text">
                <span class="content-title">姓名</span>
                <span class="content-fill">
							<input  v-model="userName" placeholder="请输入真实姓名" class="fill" onkeyup="this.value=this.value.replace(/\s+/g,'')"/>
						</span>
            </div>
        </li>
        <li class="patient-content border-bottom">
					<span class="content-mark">
						<img  src="/img/star_small.png" alt="star"/>
					</span>
            <div class="content-text">
                <span class="content-title">手机</span>
                <span class="content-fill">
							<input  placeholder="请输入手机号码" class="fill" v-model="tel"/>
						</span>
            </div>
        </li>
        <li class="patient-content border-bottom">
					<span class="content-mark">
						<img  src="/img/star_small.png" alt="star"/>
					</span>
            <div class="content-text">
                <span class="content-title">性别</span>
                <span class="sex-box">
							<input name="sex" v-model="param" type="radio" value="1"  class="sex-radio"/><span class="sex-man">男</span>
							<input name="sex" v-model="param" type="radio" value="2"  class="sex-radio"/><span>女</span>
						</span>
            </div>
        </li>
        <li class="patient-content border-bottom">
					<span class="content-mark">
					</span>
            <div class="content-text">
                <span class="content-title">籍贯</span>
                <span class="content-fill">
							<input type="text" class="select-value form-control choice-jg" value="广东省-东莞市" placeholder="请选择籍贯">
                    <!-- <input placeholder="请选择籍贯" disabled class="choice-jg"/> -->
							<span class="arrow-box"><img  src="/img/arrow.png" alt="star"/></span>
						</span>
            </div>
        </li>
        <li class="patient-content border-bottom">
					<span class="content-mark">
					</span>
            <div class="content-text">
                <span class="content-title">出生年月</span>
                <span class="content-fill">
							<input placeholder="请选择出身年份" disabled class="choice-jg" readonly class="form-control" type="text" id="date-group1-2"/>
							<span class="arrow-box"><img  src="/img/arrow.png" alt="star"/></span>
						</span>
            </div>
        </li>
        <li class="patient-content border-bottom">
					<span class="content-mark">
						<img  src="/img/star_small.png" alt="star"/>
					</span>
            <div class="content-text">
                <span class="content-title">所在科室</span>
                <span class="content-fill">
							 <input type="text" class="select-value3 form-control choice-jg" disabled :value="section">
                    <!-- <input value="门诊部" placeholder="" disabled class="choice-jg"/> -->
							<span class="arrow-box"><img  src="/img/arrow.png" alt="star"/></span>
						</span>
            </div>
        </li>
    </ul>
    <div class="bottom-btn" @click="uploadMsg">开始作答</div>
</div>
<script src="/js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 日期插件 -->
<script type="text/javascript" src="/js/jdate.js"></script>
<!-- 城市三级联动 -->
<script src="/js/json.js"></script>
<script src="/js/jsonExchange.js"></script>
<script src="/js/mPicker.min.js"></script>
<script src="/layer/layer.js"></script>
<script>
    $(function() {
        // 时间选择插件
        //获取当前时间
        var date = new Date();
        var year = date.getFullYear();
        // 格式
        new Jdate({
            el: '#date-group1-2',
            format: 'YYYY-MM-DD',
            beginYear: 1900,
            endYear: year,
            confirm: function(date) {
                vue.dateNum = date;
                console.log('确定按钮触发');
            },
            cancel: function() {
                console.log('插件运行取消');
            }
        })
        // 自定义语言
        var lang = {
            title: '自定义标题',
            cancel: '取消',
            confirm: '确认',
            year: '年',
            month: '月',
            day: '日',
        };

        // 城市三级联动
        $('.select-value').mPicker({
            level:3,
            dataJson: city3,
            Linkage:true,
            rows:6,
            idDefault:true,
            splitStr:'-',
            header:'<div class="mPicker-header">籍贯选择</div>',
            confirm:function(json){
                // 当前选中的籍贯地址
                vue.addr = json.values;
                // console.info('当前选中json：',json);
                // console.info('【json里有不带value时】');
                // console.info('选中的id序号为：', json.ids);
                // console.info('选中的value为：', json.values);
            },
            cancel:function(json){
                console.info('当前选中json：',json);
            }
        })
        /*选择科室*/
        console.log('{$section}')
        //var departmentData = [{ "name":"门诊部", "value":"1" },{ "name":"中医科", "value":"2" },{ "name":"儿科", "value":"3" }]

        var departmentData = '{$section}'
        console.log(departmentData)
            var method3=$('.select-value3').mPicker({
                level:1,
                dataJson:JSON.parse(departmentData),
                Linkage:false,
                rows:6,
                idDefault:true,
                header:'<div class="mPicker-header">科室选择</div>',
                confirm:function(json){
                     console.log('当前选中json：', JSON.parse(departmentData)[json.ids]);
                    //当前选中的科室id `
                    vue.department = JSON.parse(departmentData)[json.ids]['id'];
                    vue.section = JSON.parse(departmentData)[json.ids]['name'];
                    console.log(vue.department,'vue')
                },
                cancel:function(json){
                    console.info('当前选中json：', json);
                }
            })


    });
</script>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            userName: '',//用户名
            dateNum: '',//日期
            param: '',//性别
            addr: '',//籍贯
            tel:'',//手机号码
            department: '{$id}',
            section:'{$name}'
        },
        //页面一进入调用的接口，写里面
        created() {

        },
        methods: {
            //提交
            uploadMsg(){
                var that = this
                // 验证是否是正确的手机号码
                var tel_regexp = /^1\d{10}$/;
                if (!this.userName || !this.tel || !this.department || !this.param) {
                    layer.msg('请输入必填项！')
                } else if(!tel_regexp.test(this.tel)){
                    layer.msg('请输入正确的手机号码！')
                } else{
                    $.ajax({
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/index/surey/sureyAdd" ,//url
                        data: {name:that.userName,phone:that.tel,sex:that.param,sectionId:that.department,address:that.addr},
                        success: function (data) {
                            if(data > 0){
                                window.location = "/index/surey/answer?id="+data
                            }else{
                                layer.msg('提交失败！')
                            }
                        },
                        error : function() {
                            alert("异常！");
                        }
                    })
                }
            }
        },
    })
</script>
</body>

</html>
